<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 注意：项目正式环境请勿引用该地址 -->
    <link href="layui/css/layui.css" rel="stylesheet">
    <style type="text/css">

        .kuan {
            width: 250px;
            margin-right: 0px;
        }
    </style>
</head>
<body>

<!-- 注意：项目正式环境请勿引用该地址 -->
<script src="layui/layui.js"></script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-table-tool-temp" style="width: 1000px">
        <button class="layui-btn layui-btn-sm" lay-event="insert" id="addPlate"><i
                class="layui-icon">&#xe654;</i>新增
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
        <div class="layui-inline layui-show-xs-block">
            <label class="layui-form-label" style="width: 110px;text-align: center">交易日期</label>
            <div class="layui-inline layui-show-xs-block">
                <input class="layui-input" type="date"  autocomplete="off" placeholder="请选择日期" name="dealTimeb.

" id="businessTime">
            </div>
        </div>
        <div class="layui-inline layui-show-xs-block">
            <label class="layui-form-label" style="width: 110px;text-align: center">交易类型</label>
            <div class="layui-inline layui-show-xs-block" style="text-align: center" >
                <select name="dealType" id="dealType" >
                    <option value="" placeholder="请选择交易类型"></option>
                    <option value="1">认购</option>
                    <option value="2">申购</option>
                    <option value="3">赎回</option>
                </select>
            </div>
            <div class="layui-inline" style="float:right;height:29px;" title="搜索" lay-event="search"><i class="layui-icon layui-icon-search"></i></div>
        </div>


    </div>

</script>
<script type="text/javascript">
    layui.use(['layer', 'table', 'form', 'laydate'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
        //详见：/docs/modules/table.html#totalRow
        table.render({
            height: 'full-55'
            , minLength: "80",
            elem: '#myTable'
            , id: 'myTable'
            , url: 'selectTa'
            , toolbar: '#toolbarDemo'
            , title: 'Ta数据表'
            , page: true
            , limits: [2, 10, 15]
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'taId', title: 'TAId', fixed: 'left'}
                , {field: 'cashId', title: '现金账号ID'}
                , {field: 'fundId', title: '基金ID'}
                , {field: 'dealType', title: '交易类型'}
                , {field: 'quantity', title: '数量'}
                , {field: 'cost', title: '费用'}
                , {field: 'dealTime', title: '交易日期'}
                , {field: 'unitPrice', title: '单价'}
                , {field: 'endTime', title: '结算日期'}
                , {field: 'commissionAgents', title: '代销机构'}
                , {field: 'money', title: '总金额'}
                , {field: 'practicalMoney', title: '实际金额'}
                , {
                    field: 'dealState', title: '交易状态',
                    templet: function (item) {
                        if (item.dealState == 1) {
                            return '结算'
                        } else {
                            return '未结算'
                        }
                    }
                }
                , {title: '操作', toolbar: '#barDemo'}
            ]]
        });
        laydate.render({
            elem: '#dealTime'
        })
        laydate.render({
            elem: '#endTime'
        })
        laydate.render({
            elem: '#dealTimes'
        })
        laydate.render({
            elem: '#endTimes'
        })
        //给最右边的列 添加事件
        table.on('tool(myTable)', function (obj) {
            switch (obj.event) {
                case "del":
                    layer.confirm('您tm确定要删除吗', function (index) {
                        $.post("deleteTa"
                            , {taId: obj.data.taId}
                            , function (msg) {
                                if (msg === 1) {
                                    layer.close(index)
                                    table.reload('myTable');
                                }
                            })
                    })
                    break;
                case "edit":
                    //得到选中行的数据
                    var data = obj.data;
                    //JSON.stringify(data)  拼接成JSON格式的字符串
                    var bookObj = $.parseJSON(JSON.stringify(data));
                    //弹出一个修改的窗口
                    form.val("editform", bookObj);
                    layer.open({
                        type: 1, //iframe 内嵌窗口
                        title: '修改基金设置信息',
                        area: ['60%', '450px'],
                        content: $("#editContent")
                    });
                    break;
            }
        });
        table.on('toolbar(myTable)', function (obj) {
            //根据事件对象 来判定点击的是哪一个案例
            if (obj.event == 'insert') {
                layer.open({
                    type: 1,
                    title: '添加TA信息',
                    closeBtn: 1,
                    move: false,
                    area: ['60%',
                        '600px'],
                    content: $("#addTable")
                })
            } else if (obj.event == 'delete') {
                alert('删除事件触发');
            } else if (obj.event == 'search') {
                var businessTime = $("#businessTime").val();
                var dealType = $("#dealType").val();
                var dealState = $("#dealState").val();
                table.reload('myTable', {
                    method: "post",
                    url: "selectTa"
                    , where: {
                        'businessTime': businessTime,
                        'dealType': dealType,
                        'dealState': dealState
                    }
                })

            }
        });
        //给添加绑定事件
        form.on('submit(addsubmit)', function () {
            // alert("新增表单提交");
            //发送ajax请求到 服务器，
            //得到表单的所有数据
            var formData = form.val("addform");
            // alert('formData=' + formData);
            $.post(
                "insertTa",
                formData,
                function (msg) {
                    //重新刷新表格
                    //给予提示信息，增加成功
                    // alert(msg);
                    if (msg === "yes") {
                        alert('增加成功');
                    } else {
                        alert('增加失败')
                    }
                });
            laydate.render({
                elem: '#dealTime'
            })
            laydate.render({
                elem: '#endTime'
            })
        });

        //给修改的form绑定提交事件
        form.on('submit(editform)', function () {
            //发送ajax请求到 服务器，
            //得到表单的所有数据
            var formData = form.val("editform");
            // alert('formData=' + formData);
            $.post(
                "updateTa",
                formData,
                function (msg) {
                    //重新刷新表格
                    //给予提示信息，修改成功
                    // alert(msg);
                    if (msg == 0) {
                        alert('修改失败');
                    } else {
                        alert('修改成功');
                    }
                });
            laydate.render({
                elem: '#dealTimes'
            })
            laydate.render({
                elem: '#endTimes'
            })
        });


    })
</script>

<div id="addTable" style="display: none; height: 100%; height: 100%; text-align: center;">
    <form id="" lay-filter="addform"
          class="layui-form layui-form-pane"
          style="margin: 30px auto;  display: inline-block;">
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">TAId：</label>
            <div class="layui-input-inline">
                <input type="text" name="taId" lay-verify="required"
                       autocomplete="off" placeholder="TAId" class="layui-input">
            </div>
            <label class="layui-form-label">现金账号ID</label>
            <div class="layui-input-inline">
                <input type="text" name="cashId" lay-verify="required"
                       autocomplete="off" placeholder="现金账号ID" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">基金ID：</label>
            <div class="layui-input-inline">
                <input type="text" name="fundId" lay-verify="required"
                       autocomplete="off" placeholder="基金ID" class="layui-input">
            </div>
            <label class="layui-form-label" style="text-align: center">交易类型</label>
            <div class="layui-inline layui-show-xs-block" style="text-align: center;width: 186px">
                <select name="dealType" id="dealType1" >
                    <option value="" placeholder="交易类型"></option>
                    <option value="1">认购</option>
                    <option value="2">申购</option>
                    <option value="3">赎回</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">数量</label>
            <div class="layui-input-inline">
                <input type="text" name="quantity" lay-verify="required"
                       autocomplete="off" placeholder="数量" class="layui-input">
            </div>
            <label class="layui-form-label">代销机构</label>
            <div class="layui-input-inline">
                <select name="commissionAgents">
                    <option value="">请选择</option>
                    <option value="1">建设银行</option>
                    <option value="2">工商银行</option>
                    <option value="3">农业银行</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">费用</label>
            <div class="layui-input-inline">
                <input type="text" name="cost" lay-verify="required"
                       autocomplete="off" placeholder="费用" class="layui-input">
            </div>
            <label class="layui-form-label">交易日期</label>
            <div class="layui-input-inline">
                <input type="text" name="dealTime" lay-verify="required" id="dealTime"
                       autocomplete="off" placeholder="交易日期" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">单价</label>
            <div class="layui-input-inline">
                <input type="text" name="unitPrice" lay-verify="required"
                       autocomplete="off" placeholder="单价" class="layui-input">
            </div>
            <label class="layui-form-label">结算日期</label>
            <div class="layui-input-inline">
                <input type="text" name="endTime" lay-verify="required" id="endTime"
                       autocomplete="off" placeholder="结算日期" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">总金额</label>
            <div class="layui-input-inline">
                <input type="text" name="money" lay-verify="required"
                       autocomplete="off" placeholder="总金额" class="layui-input">
            </div>
            <label class="layui-form-label">实际金额</label>
            <div class="layui-input-inline">
                <input type="text" name="practicalMoney" lay-verify="required"
                       autocomplete="off" placeholder="实际金额" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">交易状态</label>
            <div class="layui-input-inline">
                <select name="dealState">
                    <option value="">请选择</option>
                    <option value="1">已结算</option>
                    <option value="2">未结算</option>
                </select>
            </div>
        </div>

        <div style="position: absolute; bottom: 0px; left: 38%;top: 420px">
            <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
            <button class="layui-btn" lay-submit="" lay-filter="addsubmit" id="addsubmit">
                <i class="layui-icon">&#x1005;</i>添加
            </button>
            <button class="layui-btn layui-bg-red cancel" type="button">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>
<!--修改的div内容-->
<div id="editContent"
     style="display: none; height:100%; width: 100%; text-align: center;">
    <form id="editform" lay-filter="editform"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;">
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">TAId：</label>
            <div class="layui-input-inline">
                <input type="text" name="taId" lay-verify="required"
                       autocomplete="off" placeholder="TAId" class="layui-input">
            </div>
            <label class="layui-form-label">现金账号ID</label>
            <div class="layui-input-inline">
                <input type="text" name="cashId" lay-verify="required"
                       autocomplete="off" placeholder="现金账号ID" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">基金ID：</label>
            <div class="layui-input-inline">
                <input type="text" name="fundId" lay-verify="required"
                       autocomplete="off" placeholder="基金ID" class="layui-input">
            </div>
            <label class="layui-form-label">交易类型</label>
            <div class="layui-input-inline">
                <select name="dealType">
                    <option>请选择</option>
                    <option value="1">认购</option>
                    <option value="2">申购</option>
                    <option value="3">赎回</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">数量</label>
            <div class="layui-input-inline">
                <input type="text" name="quantity" lay-verify="required"
                       autocomplete="off" placeholder="数量" class="layui-input">
            </div>
            <label class="layui-form-label">代销机构</label>
            <div class="layui-input-inline">
                <select name="commissionAgents">
                    <option value="">请选择</option>
                    <option value="1">建设银行</option>
                    <option value="2">工商银行</option>
                    <option value="3">农业银行</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">费用</label>
            <div class="layui-input-inline">
                <input type="text" name="cost" lay-verify="required"
                       autocomplete="off" placeholder="费用" class="layui-input">
            </div>
            <label class="layui-form-label">交易日期</label>
            <div class="layui-input-inline">
                <input type="text" name="dealTime" lay-verify="required" id="dealTimes"
                       autocomplete="off" placeholder="交易日期" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">单价</label>
            <div class="layui-input-inline">
                <input type="text" name="unitPrice" lay-verify="required"
                       autocomplete="off" placeholder="单价" class="layui-input">
            </div>
            <label class="layui-form-label">结算日期</label>
            <div class="layui-input-inline">
                <input type="text" name="endTime" lay-verify="required" id="endTimes"
                       autocomplete="off" placeholder="结算日期" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">总金额</label>
            <div class="layui-input-inline">
                <input type="text" name="money" lay-verify="required"
                       autocomplete="off" placeholder="总金额" class="layui-input">
            </div>
            <label class="layui-form-label">实际金额</label>
            <div class="layui-input-inline">
                <input type="text" name="practicalMoney" lay-verify="required"
                       autocomplete="off" placeholder="实际金额" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">交易状态</label>
            <div class="layui-input-inline">
                <select name="dealState">
                    <option value="">请选择</option>
                    <option value="1">已结算</option>
                    <option value="2">未结算</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="position: absolute;left: 28%; bottom: 5px">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="editsubmit"><i class="layui-icon">&#x1005;</i>修改
                </button>
                <button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon">&#x1006;</i>取消</button>
            </div>
        </div>
    </form>
</div>
<table id="myTable" lay-filter="myTable">

</table>
<!--表格-->
<!--表格最后一列的操作按钮的工具栏-->
<div style="display: none;" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i
            class="layui-icon">&#xe642;</i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
            class="layui-icon">&#xe640;</i>删除</a>
</div>


</body>
</html>